/* stylelint-disable at-rule-no-unknown,at-rule-empty-line-before */
@import "../../../style/default";
@import "mixin";

/* apes-btn */
$btn-prefix-cls: #{$style-prefix}-btn;

// Button styles
// -----------------------------
.#{$btn-prefix-cls} {
  line-height: $line-height-base;
  @include btn;
  @include btn-default;

  // Make sure that the target of Button's click event always be `button`
  // Ref: https://github.com/apes-design/apes-design/issues/7034
  > i,
  > span {
    pointer-events: none;
  }

  &-primary {
    @include btn-primary;

    .#{$btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
      border-right-color: $btn-group-border;
      border-left-color: $btn-group-border;

      &:disabled {
        border-color: $btn-default-border;
      }
    }

    .#{$btn-prefix-cls}-group &:first-child {
      &:not(:last-child) {
        border-right-color: $btn-group-border;
        &[disabled] {
          border-right-color: $btn-default-border;
        }
      }
    }

    .#{$btn-prefix-cls}-group &:last-child:not(:first-child),
    .#{$btn-prefix-cls}-group & + & {
      border-left-color: $btn-group-border;
      &[disabled] {
        border-left-color: $btn-default-border;
      }
    }
  }

  &-ghost {
    @include btn-ghost;
  }

  &-dashed {
    @include btn-dashed;
  }

  &-danger {
    @include btn-danger;
  }

  &-circle,
  &-circle-outline {
    @include btn-circle($btn-prefix-cls);
  }

  &:before {
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    background: #fff;
    opacity: 0.35;
    content: '';
    border-radius: inherit;
    z-index: 1;
    transition: opacity .2s;
    pointer-events: none;
    display: none;
  }

  .#{$iconfont-css-prefix} {
    transition: margin-left .3s $ease-in-out;
  }

  &-loading:before {
    display: block;
  }

  &-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
    padding-left: 29px;
    pointer-events: none;
    position: relative;
    .#{$iconfont-css-prefix} {
      margin-left: -14px;
    }
  }

  &-sm &-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
    padding-left: 24px;
    .#{$iconfont-css-prefix} {
      margin-left: -17px;
    }
  }

  &-group {
    @include btn-group($btn-prefix-cls);
  }

  &:not(&-circle):not(&-circle-outline) &-icon-only {
    padding-left: 8px;
    padding-right: 8px;
  }

  // http://stackoverflow.com/a/21281554/3040605
  &:focus > span,
  &:active > span {
    position: relative;
  }

  // To ensure that a space will be placed between character and `Icon`.
  > .#{$iconfont-css-prefix} + span,
  > span + .#{$iconfont-css-prefix} {
    margin-left: 8px;
  }

  &-clicked:after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    border-radius: inherit;
    border: 0 solid $primary-color;
    opacity: 0.4;
    animation: buttonEffect .4s;
    display: block;
  }

  &-danger &-clicked:after {
    border-color: $btn-danger-color;
  }

  &-background-ghost {
    background: transparent !important;
    border-color: #fff;
    color: #fff;
  }

  &-background-ghost &-primary {
    @include button-variant-ghost($btn-primary-bg);
  }

  &-background-ghost &-danger {
    @include button-variant-ghost($btn-danger-color);
  }

  &-two-chinese-chars:first-letter {
    letter-spacing: .34em;
  }

  &-two-chinese-chars > * {
    letter-spacing: .34em;
    margin-right: -.34em;
  }
}

@keyframes buttonEffect {
  to {
    opacity: 0;
    top: -6px;
    left: -6px;
    bottom: -6px;
    right: -6px;
    border-width: 6px;
  }
}

a.#{$btn-prefix-cls} {
  line-height: $btn-height-base - 2px;
  &-lg {
    line-height: $btn-height-lg - 2px;
  }
  &-sm {
    line-height: $btn-height-sm - 2px;
  }
}

@mixin preserve-white-spaces-mixin($enabled) {
  @if $enabled == true {
    $white-spacing: $layout-gutter; // 表单
    [apes-form] {
      // 按钮
      .apes-btn + .apes-btn,
      .apes-btn + .apes-popconfirm {
        margin-left: $white-spacing;
      }
    }
  }
}

@include preserve-white-spaces-mixin($preserve-white-spaces-enabled);

//.#{$btn-prefix-cls}:hover, .#{$btn-prefix-cls}:focus {
//  color: $primary-5;
//  background-color: $btn-default-bg;
//  border-color: $primary-5;
//}

@import "./theme";
